<template>
  <div class="search-wrap">
    <div class="search-item" :class="insideActive==='zonghe'?'is_active':''" @click="handleClick('zonghe')">
      <div>
        综合排序
        <svg data-v-a5cc4024="" viewBox="0 0 72 32" class="dropdown-icon"><path d="M36 32l36-32h-72z"></path></svg>
      </div>
    </div>
    <div class="search-item" :class="insideActive==='juli'?'is_active':''" @click="handleClick('juli')">距离最近</div>
    <div class="search-item" :class="insideActive==='pinzhi'?'is_active':''" @click="handleClick('pinzhi')">品质联盟</div>
    <div class="search-item" :class="insideActive==='order'?'is_active':''" @click="handleClick('order')">
      <div class="filter">
        筛选
        <svg data-v-a5cc4024="" class="filter-nav-more__icon">
          <use data-v-a5cc4024="" xlink:href="#more-filter">
            <svg viewBox="0 0 26 26" id="more-filter" width="100%" height="100%"><path d="M9.001 15.009V23a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7.981l7.788-10.01a1 1 0 0 0-1.578-1.228l-8 10.28a1 1 0 0 0-.21.615V22h-4v-7.324a1 1 0 0 0-.2-.6L4.001 5h14a1 1 0 0 0 0-2H2a1 1 0 0 0-.8 1.6L9 15.009z"></path></svg>
          </use>
        </svg>
      </div>
    </div>
    <div class="z-list" ref="zList">
      <slot name="zList"></slot>
    </div>
    <div class="o-list">
      <slot name="oList"></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      insideActive:'',
      mask:null
    }
  },
  props:{
    active:{
      type: String,
      default: 'zonghe'
    }
  },
  mounted() {
    this.insideActive = this.active
  },
  name: "SearchMenu",
  methods: {
    handleClick(dom){
      this.insideActive  = dom
      this.$emit('input',dom)
      this.$emit('handleClick',dom)
    },
    showSelect(){
      // this.$emit('showMask')
      this.showMask()
      if(this.insideActive === 'zonghe'){
        this.$refs.zList.style.display.block;
      }
      if(this.insideActive === 'order'){
        this.$refs.oList.style.display.block;
      }
    },
    showMask() {
      // this.$refs.mask.style.display = 'block'
      if(!document.getElementById('mask')){
        let node = document.createElement("div")
        node.addEventListener('touchmove',function(e){
          e.preventDefault();  //禁止touchmove的默认操作（即拖动页面）
          e.stopPropagation();  //禁止touchmove的默认操作（即拖动页面）
        },false)
        window.addEventListener('touchend',e=>{
          this.cancelMask()
        })
        node.className = 'mask'
        node.id = 'mask'
        document.body.appendChild(node)
      }
      let mask = document.getElementById('mask')
      mask.style.display = 'block'
    },
    cancelMask() {
      let mask = document.getElementById('mask')
      if(mask){
        mask.style.display = 'none'
      }
    }
  },
  beforeDestroy() {
    console.group('destroyed 销毁完成状态===============》');
    this.cancelMask()
    window.removeEventListener('touchend',this.cancelMask())
  },
};
</script>
<style scoped lang="less">
  @import "./search-menu.less";
</style>
<style>
.mask{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
  background-color: #000;
  opacity: 0.3;
  display: none;
  transition: all .3s ease-in-out;
}
</style>
